<template>
	<view class="item">
		<template v-if="item.state === 'listing'">
			<u-swiper :list="sliders" :interval="6000" v-if="windowWidth > 0" :height="windowWidth" img-mode="aspectFit" bg-color="#FFF"></u-swiper>
			<view class="wrap">
				<view class="topPrice u-padding-20">
					<view class="u-flex" style="align-items: flex-end">
						<view style="font-size: 24rpx; line-height: 24rpx">￥</view>
						<view style="font-size: 42rpx; line-height: 42rpx">{{ parseFloat(item.unit_price) }}</view>
					</view>
					<view class="u-flex u-p-t-10" style="align-items: flex-end">
						<view style="font-size: 24rpx; text-decoration: line-through; margin-right: 10rpx">￥{{ parseFloat(item.original_price) }}</view>
						<view style="font-size: 24rpx">|&nbsp;已售出460件</view>
					</view>
				</view>
				<view class="u-padding-20">
					<text class="title u-font-lg">{{ item.name }}</text>
					<view class="remark u-flex u-p-t-10 u-font-md">
						<text class="remark u-font-md">{{ item.remark }}</text>
					</view>
					<view class="u-flex u-row-between">
						<view class="u-flex u-row-between u-p-t-30 u-p-b-30 u-font-md" style="display: flex; align-items: end">
							<!-- 规格 -->
							<view v-for="v in item.sku_options" :key="v.id" :class="specifyId == v.id ? 'specify_act' : 'specify'" @tap="specifyBtn(v.id)">{{ v.sku_label }}</view>
						</view>
						<u-number-box v-model="quantity" :min="1" @change="numChange"></u-number-box>
					</view>
				</view>
				<view style="text-align: center; font-size: 36rpx; font-weight: 600">产品详情</view>
			</view>

			<u-line class="u-line"></u-line>

			<view class="u-content">
				<u-parse :html="item.details"></u-parse>
			</view>

			<view style="height: 100rpx"></view>
			<view class="navigationBtn">
				<!-- 		<view class="navigationTip u-flex u-row-between" @tap="boundCar">
					<view>下单前请绑定你的爱车</view>
					<view v-if="verifiedBtnFlag == true">{{ user.car.plate_number }}&emsp;></view>
					<view v-else>前往绑定&emsp;></view>
				</view> -->
				<view class="u-flex u-row-between">
					<button @click="switchTab('/pages/index/index')">首页</button>
					<!-- 判断一下车辆资料是否完善 -->
					<button style="background-color: #ff4544; color: #fff" @click="buyNow">立即购买</button>
					<!-- <button style="background-color: #cecece" v-else @click="tipBtn">立即购买</button> -->
				</view>
			</view>
		</template>
		<template v-if="item.state === 'in-stock'">
			<u-swiper :list="sliders" :interval="6000" v-if="windowWidth > 0" :height="windowWidth" img-mode="aspectFit" bg-color="#FFF"></u-swiper>
			<view class="wrap u-padding-30">
				<text class="title u-font-lg">{{ item.name }}</text>
				<text class="remark u-font-md" v-if="item.spec">{{ item.spec }}</text>

				<view class="remark u-flex u-p-t-20 u-font-md">
					<text class="remark u-font-md">{{ item.remark }}</text>
				</view>

				<view class="u-flex u-row-between">
					<view class="u-flex u-row-between u-p-t-30 u-p-b-30 u-font-md">
						<text class="type" v-if="item.weight">{{ item.weight }}克/{{ item.unit ? item.unit : '件' }}</text>
						<text class="price">{{ item.unit_price }}元</text>
					</view>
					<u-number-box v-model="quantity" :min="1" @change="numChange"></u-number-box>
				</view>
			</view>

			<u-line class="u-line"></u-line>

			<view class="u-content">
				<u-parse :html="item.details"></u-parse>
			</view>

			<view style="height: 100rpx"></view>

			<view class="navigation u-flex u-row-between">
				<view class="left">
					<view class="item" @click="switchTab('/pages/custom/custom')">
						<div class="uni-tabbar__icon" style="width: 20px; height: 20px"><img src="/static/images/home-1.png" /></div>
						<view class="text u-line-1">首页</view>
					</view>
					<view class="item" @click="openCS">
						<u-icon name="server-fill" :size="40"></u-icon>
						<view class="text u-line-1">客服</view>
					</view>
					<!-- <view class="item" @click="openChelixin">
						<div class="uni-tabbar__icon" style="width: 20px; height: 20px;"><img src="/static/images/agreement.png"></div>
						<view class="text u-line-1">《车力新用户协议》</view>
					</view> -->
					<!-- <view class="item"> -->
					<!-- <u-icon name="zhuanfa" :size="40" :color="$u.color['contentColor']"></u-icon> -->
					<!-- <view class="text u-line-1">分享</view> -->
					<!-- </view> -->
					<!-- <view class="item car" @click="switchTab('/pages/buy/cart')">
						<u-badge class="car-num" :count="cartQantity" type="error" :offset="[-3, -6]"></u-badge>
						<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">购物车</view>
					</view> -->
				</view>
				<!-- <view class="right" @click="addToCart">
					<view class="cart btn u-line-1">加入购物车</view>
				</view> -->
				<view class="right">
					<view class="cart btn u-line-1" style="background-color: gray">商品已下架</view>
				</view>
			</view>
		</template>

		<template v-if="item.state === 'virtual_pay'">
			<u-swiper :list="sliders" :interval="6000" v-if="windowWidth > 0" :height="windowWidth" img-mode="aspectFit" bg-color="#FFF"></u-swiper>
			<view class="wrap u-padding-30">
				<text class="title u-font-lg">{{ item.name }}</text>
				<text class="remark u-font-md" v-if="item.spec">{{ item.spec }}</text>

				<view class="remark u-flex u-p-t-20 u-font-md">
					<text class="remark u-font-md">{{ item.remark }}</text>
				</view>
			</view>

			<u-line class="u-line"></u-line>
			<!-- <view style="height: 50rpx;"></view> -->

			<view class="u-content">
				<u-parse :html="item.details"></u-parse>
			</view>

			<view class="form-content">
				<label class="big-title">付款信息</label>
				<label class="u-border-bottom" v-if="item.require_username === 'yes'">
					<view class="tips">姓名</view>
					<input type="text" v-model="form.username" auto-complete placeholder="请填写姓名" />
				</label>
				<label class="u-border-bottom" v-if="item.require_mobile === 'yes'">
					<view class="tips">联系电话</view>
					<input type="number" v-model="form.mobile" placeholder="请输入手机号" />
				</label>
				<label class="u-border-bottom" v-if="form.require_inviter === 'yes'">
					<view class="tips">请填写邀请码</view>
					<input style="flex: 1" type="text" v-model="form.inviter" placeholder="请填写邀请码" />
				</label>
				<label class="u-border-bottom">
					<view class="tips">备注留言</view>
					<input style="flex: 1" type="text" v-model="form.remark" :placeholder="item.remark_placeholder" />
				</label>

				<view style="text-align: center; margin-bottom: 50rpx; margin-top: 50rpx">
					<u-button style="display: block" @tap="showPayMethod = true" type="primary" shape="circle" size="medium">确认支付: ￥{{ item.unit_price }}</u-button>
				</view>
				<u-action-sheet :list="payMethods" v-model="showPayMethod" @click="clickPayMethod" :tips="tips" :cancel-btn="true"></u-action-sheet>
				<u-modal v-model="showWxNativePay" title="微信扫码支付" @confirm="gotoVirtualPaymentDetail" confirm-text="已完成支付">
					<view class="slot-content">
						<rich-text :nodes="wxNativePayQRCode"></rich-text>
					</view>
				</u-modal>
			</view>
		</template>
		<wx-share :title="item.name" :desc="item.remark" :imgUrl="item.cover" :link="currentPage" ref="wxs"></wx-share>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentPage: location.href,
			showCarInfo: false,
			verifiedBtnFlag: false,
			specification: [
				{
					id: 1,
					name: '汽油车专用'
				},
				{
					id: 2,
					name: '柴油车专用'
				}
			],
			specifyId: 0,
			itemId: '',
			storeId: '',
			shop: {},
			user: {},
			item: {},
			quantity: 1,
			cartQantity: '',
			windowWidth: 0,
			form: {},
			virtualPayment: {},
			showPayMethod: false,
			showWxNativePay: false,
			wxNativePayQRCode: '',
			payMethods: [
				{
					text: '微信支付',
					color: 'green',
					fontSize: 28,
					subText: '直接使用微信付款',
					payMethod: 'wx-jsapi'
				},
				{
					text: '微信收款码',
					color: 'green',
					fontSize: 28,
					subText: '扫码付款，可请朋友代付',
					payMethod: 'wx-native'
				}
				// {
				// 	text: '微信H5支付',
				// 	color: 'green',
				// 	fontSize: 28,
				// 	subText: '手机浏览器客户端H5网页支付',
				// 	payMethod: 'wx-mweb'
				// }
			],
			tips: {
				text: '选择支付方式',
				color: '#909399',
				fontSize: 24
			}
		};
	},
	computed: {
		sliders() {
			let s = [];
			if (this.item.images) {
				for (let i = 0; i < this.item.images.length; i++) {
					s.push({
						image: this.item.images[i],
						name: ''
					});
				}
			}
			return s;
		},
		applicableStores() {
			if (this.item.applicable_stores && this.item.applicable_stores.length > 0) {
				return this.item.applicable_stores;
			}
			return [];
		}
	},
	onLoad(options) {
		const info = uni.getSystemInfoSync();
		console.log(info);
		this.windowWidth = info.windowWidth * 2;
		this.itemId = options.id;
		if (options.store_id) {
			this.storeId = options.store_id;
		}
		console.log(this.windowWidth);
		this.getItem();
	},
	onShow() {
		this.getShop();
		this.getUserInfo();
		this.getCart();
	},
	methods: {
		// 绑定车辆
		boundCar() {
			this.openPage('/pages/ucp/registration');
		},
		// 切换规格
		specifyBtn(id) {
			console.log(id);
			this.specifyId = id;
		},
		openChelixin() {
			if (this.shop.chelixin_article_id) {
				this.openPage('/pages/article/detail', { id: this.shop.chelixin_article_id });
			}
		},
		openCS() {
			location.href = 'https://work.weixin.qq.com/kfid/kfc6d3aceb85522e2b7';
		},
		getItem() {
			let data = { id: this.itemId };
			if (this.storeId) {
				data.store_id = this.storeId;
			}
			this.$u
				.post('/item/detail', data)
				.then((res) => {
					this.item = res;
					console.log('this.item', this.item);
					if (this.item.sku_options.length != 0) {
						this.specifyId = this.item.sku_options[0].id;
					} else {
						this.specifyId = this.item.id;
					}
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getCart() {
			this.$u
				.post('/shopping/cart-list', {})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					this.cartQantity = qty;
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				})
				.catch((e) => {});
		},
		addToCart() {
			this.$u
				.post('/shopping/add-to-cart', {
					item_id: this.itemId,
					quantity: this.quantity
				})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					this.cartQantity = qty;
					// uni.setTabBarBadge({
					// 	index: 1,
					// 	text: qty.toString()
					// })
				})
				.catch((e) => {});
		},
		tipBtn() {
			this.$u.toast('车辆信息未填写，即将前往');
			setTimeout(() => {
				this.openPage('/pages/ucp/registration');
			}, 1500);
		},
		buyNow() {
			console.log('data', this.specifyId);
			let data = {
				item_id: this.specifyId,
				quantity: this.quantity
			};
			if (this.storeId) {
				data.store_id = this.storeId;
			}
			this.$u
				.post('/shopping/buy-now', data)
				.then((res) => {
					console.log(res);
					if (res.id) {
						this.openPage('/pages/ucp/order-detail', { id: res.id });
					}
				})
				.catch((e) => {});
		},
		// VirtualPay
		gotoVirtualPaymentDetail() {
			if (this.virtualPayment.id) {
				this.openPage('/pages/ucp/order-detail', { id: this.virtualPayment.id });
			}
		},
		clickPayMethod(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.payMethods[index].text}`);
			switch (this.payMethods[index].payMethod) {
				case 'wx-jsapi':
					this.wxJsApiPay();
					break;
				case 'wx-native':
					this.wxNativePay();
					break;
				case 'wx-mweb':
					this.wxMWebPay();
				default:
			}
		},
		wxJsApiPay() {
			let that = this;
			this.$u
				.post('/shopping/virtual-pay-now', {
					item_id: this.itemId,
					quantity: this.quantity,
					form: this.form
				})
				.then((res) => {
					console.log(res);
					this.virtualPayment = res;
					this.$u
						.post('/payment/call-pay', {
							payment_id: this.virtualPayment.id,
							pay_method: 'wx-jsapi'
						})
						.then((res) => {
							console.log(res);
							function onBridgeReady() {
								WeixinJSBridge.invoke('getBrandWCPayRequest', res, function (res) {
									console.log(res);
									if (res.err_msg === 'get_brand_wcpay_request:ok' || res.errMsg === 'get_brand_wcpay_request:ok') {
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
										that.openPage('/pages/ucp/order-detail', { id: that.virtualPayment.id });
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									} else {
										if (res.errMsg) {
											uni.showToast({
												title: res.errMsg,
												icon: 'none',
												duration: 3000
											});
										}
										if (res.err_msg) {
											uni.showToast({
												title: res.err_msg,
												icon: 'none',
												duration: 3000
											});
										}
									}
								});
							}
							if (typeof WeixinJSBridge == 'undefined') {
								if (document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								} else if (document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								}
							} else {
								onBridgeReady();
							}
						})
						.catch((e) => {
							console.log(e);
						});
				})
				.catch((e) => {
					console.log(e);
				});
		},
		wxNativePay() {
			this.$u
				.post('/shopping/virtual-pay-now', {
					item_id: this.itemId,
					quantity: this.quantity,
					form: this.form
				})
				.then((res) => {
					console.log(res);
					this.virtualPayment = res;
					this.$u
						.post('/payment/call-pay', {
							payment_id: this.virtualPayment.id,
							pay_method: 'wx-native'
						})
						.then((res) => {
							console.log(res);
							if (res.code_url) {
								this.wxNativePayQRCode = `<div style="display:flex;align-items:center;justify-content:center;padding:15px;box-sizing:border-box;"><img src="${res.code_url}" style="max-width:100%;"/></div>`;
								this.showWxNativePay = true;
							} else {
								uni.showToast({
									title: res.msg,
									icon: none
								});
							}
						})
						.catch((e) => {
							console.log(e);
						});
				})
				.catch((e) => {
					console.log(e);
				});
		},
		openPage(jumpURL, params = {}) {
			console.log(jumpURL);
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		switchTab(jumpURL) {
			uni.switchTab({
				url: jumpURL
			});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
					if (this.user.verified !== 'yes') {
						uni.showToast({
							title: '请先完成车主注册'
						});
						this.openPage('/pages/ucp/profile');
					}
					if (this.user.car.plate_number.length !== 0) {
						this.verifiedBtnFlag = true;
					} else {
						this.verifiedBtnFlag = false;
					}
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
				})
				.catch((e) => {});
		},
		numChange(e) {
			this.quantity = e.value;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .u-icon-plus,
::v-deep .u-icon-minus {
	width: 40rpx !important;
	height: 40rpx !important;
	border-radius: 40rpx !important;
	background-color: #555 !important;
	color: #fff !important;
	.u-icon__icon {
		font-size: 20rpx !important;
		color: #fff !important;
	}
}
::v-deep .u-number-input {
	color: #555 !important;
	width: 40rpx !important;
	font-size: 30rpx !important;
	background: transparent !important;
}
.topPrice {
	width: 100%;
	background: url('https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-d7dd3affcc4b83e6bfd96b97297745ff.png') no-repeat center;
	background-size: 100%;
	color: #fff;
}
.specify {
	font-size: 20rpx;
	padding: 10rpx 24rpx;
	border-radius: 40rpx;
	background-color: #fff;
	border: solid 1rpx #999;
	color: #999;
	margin-right: 20rpx;
}
.specify_act {
	font-size: 20rpx;
	padding: 10rpx 24rpx;
	border-radius: 40rpx;
	background-color: #555;
	color: #fff;
	margin-right: 20rpx;
}
img {
	max-width: 100%;
}
::v-deep uni-swiper {
	height: 100vw !important;
}
.item {
	.title {
		font-weight: bold;
		display: block;
		font-size: 1.4em;
		margin-top: 20rpx;
	}

	.u-content {
		line-height: 1.8;
		padding: 30rpx;
		p {
			margin-block-start: 0.5em;
			margin-block-end: 0.5em;
		}
	}
	.price {
		font-size: 1.2em;
		font-weight: 600;
		color: red;
		&.origin {
			color: #be7225;
		}
	}
}
.navigationTip {
	// margin-top: 100rpx;
	font-size: 26rpx;
	background-color: #93d2f3;
	padding: 10rpx 20rpx;
}
.navigationBtn {
	// display: flex;
	width: 100%;
	// height: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	button {
		height: 100%;
		width: 50%;
		border-radius: 0 !important;
	}
}

.form-content {
	padding: 0 60rpx;
	padding-bottom: 30rpx;
	position: sticky;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	filter: blur(0.3);

	.title {
		text-align: center;
		font-size: 48rpx;
		font-weight: 500;
		margin-bottom: 50rpx;
		img {
			max-width: 80%;
		}
	}

	label {
		display: flex;
		// border-bottom: 1px solid #dbdbdb;
		margin-bottom: 18rpx;
		padding: 18rpx 0;
	}

	input {
		text-align: left;
		// margin-bottom: 10rpx;
		// padding-bottom: 6rpx;
	}

	input[short] {
		width: 4em;
	}

	.tips {
		color: $u-type-info;
		// margin-bottom: 44rpx;
		// margin-top: 18rpx;
		color: #02396a;
		width: 7em;
	}
	.link-color {
		color: #195ed7;
	}

	.getCaptcha {
		background-color: #195ed7;
		color: $u-tips-color;
		color: #fff;
		border: none;
		font-size: 30rpx;
		padding: 12rpx 0;

		&::after {
			border: none;
		}
	}

	.alternative {
		color: $u-tips-color;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.u-border-bottom::after {
		border-color: #9d9ea0;
	}

	uni-input {
		// padding-bottom:20rpx;
	}
	.sm-font {
		font-size: 0.9em;
		margin-bottom: 1em;
		line-height: 1.8;
	}
	.login-box {
		text-align: right;
		padding: 40rpx 0 50rpx 0;
	}
	.select-icon {
		height: 28rpx;
		display: inline-block;
		margin-right: 0.5em;
	}
}
</style>
